<template>
  <el-drawer
    v-model="drawerShow"
    :custom-class="className"
    :size="size"
    :destroy-on-close="true"
    :show-close="showClose"
    :close-on-press-escape="false"
    :with-header="props.withHeader"
    modal-class="transparent-overlay"
    @open="emit('open')"
    @close="emit('close')"
  >
    <template #header="{ close }">
      <div class="title">{{ props.title }}</div>

      <!-- <SvgIcon name="close" size="22px" class="el-drawer-close" @click="close" /> -->
    </template>
    <!-- <SvgIcon
      v-if="!props.withHeader"
      name="close"
      size="22px"
      class="el-drawer-close"
      @click="drawerShow = false"
    /> -->
    <slot />
    <template #footer v-if="$slots.footer">
      <slot name="footer" />
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
interface DrawerProps {
  modelValue: boolean
  title?: string
  withHeader?: boolean
  form?: boolean //form样式调整
  size?: string
  showClose?: boolean
}

const emit = defineEmits(['update:modelValue', 'open', 'close'])
const props = withDefaults(defineProps<DrawerProps>(), {
  withHeader: true,
  size: '500'
})

const drawerShow = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
const className = computed(() => {
  let str = 'c-drawer'
  if (props.form) str += ' c-drawer-form'
  return str
})
</script>

<style lang="scss">
.c-drawer {
  &.el-drawer {
    box-shadow: -2px 0px 20px rgba(33, 35, 46, 0.2);
  }

  .el-drawer__header {
    margin: 0;
    padding: 16px 54px 0 16px;
    height: 54px;
    box-sizing: border-box;
    color: #404352;
    .title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .el-drawer-close {
    position: absolute;
    right: 16px;
    top: 24px;
    z-index: 1;
    cursor: pointer;
  }

  .el-drawer__body {
    background: #f5f5f5;
    padding: 0;
  }

  .el-drawer__footer {
    padding-top: 11px;
    border-top: 1px solid #e6e6e6;
    box-sizing: border-box;
    height: 60px;
  }

  .drawer-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    & > .el-tabs__header {
      padding-right: 54px;
      border: none;

      .el-tabs__nav-wrap {
        margin: 0;
      }

      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        padding-top: 13px;
      }

      .el-tabs__item {
        padding-top: 26px;
        height: 54px;
      }
    }

    & > .el-tabs__content {
      flex: 1;

      .el-tab-pane {
        height: 100%;

        &[white] {
          background: #fff;
        }
      }
    }
  }

  .el-form {
    padding: 16px;
    border-top: 8px solid #f7f7f7;
  }
}
</style>
